<!-- 拼单中 -->
<template>
	<view>
		<view class="head"><Header title="拼单中" :isShowRight="false" @back="back" /></view>
		<view style="height: 106rpx;background-color: #194FC9;"></view>
		<view class="main">
			<view style="height:40rpx;"></view>
			<view class="info_bg">
				<view class="bg_img">
					<image v-if="info.superValueFlag == 1" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg8.png" mode=""></image>
					<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg9.png" mode=""></image>
				</view>
				<view class="info_box">
					<view class="left">
						<view class="name">{{ info.vipName }}</view>
						<view class="zk">限时{{ handlerNum(info.discountPrice, info.originalPrice) }}折</view>
					</view>
					<view class="right">
						<view class="discount">
							<text>￥</text>
							{{ info.discountPrice }}
						</view>
						<view class="origin">￥{{ info.originalPrice }}</view>
					</view>
				</view>
			</view>
			<view class="time" v-if="timer">
					剩余
					<text class="hour">{{ hour }}</text>
					<text class="mh">:</text>
					<text class="mint">{{ minute }}</text>
					<text class="mh">:</text>
					<text class="second">{{ second }}</text>
					结束
			</view>

			<view class="photo">
				<view class="box">
					<view class="imgBox" v-for="(item, index) in info.uImgs" :key="index">
						<avatar class="avatar" :src="item"></avatar>
						<view v-if="index == 0" class="master">拼主</view>
					</view>
					<view class="imgBox" v-for="cell in info.surplus" :key="cell"><image class="avatar" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img9.png" mode=""></image></view>
				</view>
			</view>

			<view class="status" v-if="timer">
				拼单中，还差
				<text class="num">{{ info.surplus }}人</text>
				拼单成功
			</view>
			<view class="status" v-else>
				拼单已结束
			</view>

			<view class="btns">
				<view @click="back">返回</view>
				<view class="right" @click="invitation">邀请好友拼单</view>
			</view>

			<view class="share">分享好友越多，成团越快哦~</view>
		</view>
		<!-- 分享弹窗 -->
		<Share :show="showShare" :shareDate="shareDate" @cancel="showShare = false" :custom="2"></Share>
	</view>
</template>

<script>
import { spellsInfo } from '@/apis/apis.js';
import Header from '@/components/c_header.vue';
import Share from '@/components/share.vue';
import avatar from '@/components/avatar.vue';
export default {
	components: {
		Header,
		Share,
		avatar
	},
	data() {
		return {
			id: '',
			showShare: false,
			shower: false, //展示年度会员还是季度会员
			info: {},
			timer: null,
			hour: '00',
			minute: '00',
			second: '00',
			shareDate: null
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.init();
	},
	methods: {
		init() {
			spellsInfo(this.id).then(res => {
				console.log(res);
				res.data.surplus = res.data.targetNumber - res.data.doneNumber;
				if (res.data.spellMembers.length) {
					res.data.uImgs = res.data.spellMembers
				} else {
					res.data.uImgs = [res.data.headPortrait];
				}
				this.info = res.data;
				this.countDown();
			});
		},
		countDown() {
			this.timer = setInterval(() => {
				let date = +new Date(this.info.endTime); //+new Date() 返回毫秒数
				let now = +new Date();
				let surplus = (date - now) / 1000; // 剩余秒
				let h = parseInt((surplus / 60 / 60) % 24); // 时
				let m = parseInt((surplus / 60) % 60); // 分
				let s = parseInt(surplus % 60); //秒
				this.hour = h < 10 ? '0' + h : h;
				this.minute = m < 10 ? '0' + m : m;
				this.second = s < 10 ? '0' + s : s;
				if (surplus <= 0) {
					clearInterval(this.timer);
					this.timer = null;
					return '已结束';
				}
			}, 1000);
		},
		// 计算折扣
		handlerNum(newVal, oldVal) {
			let num = newVal / oldVal;
			const v = Math.pow(10, 1);
			return Math.round(num * v) / v;
		},
		// 分享
		invitation() {
			this.showShare = true;
			this.shareDate = {
				serviceId:this.info.spellId, // 业务id
				title: this.info.vipName,
				summary: this.info.nickName+'的拼单',
				imageUrl: this.info.headPortrait,
				memberId:uni.getStorageSync('USER_DATA').memberId,//用户id
				type: 0, //0	图文 1	纯文字 2	纯图片 3	音乐 4	视频 5	小程序
				objectType: 2 ,// 0话题 1课程 2拼单
			};
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.head {
	background-color: #194FC9;
	// background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg7.png') no-repeat;
	// background-size: cover;
	// padding: 30rpx 28rpx 100rpx 30rpx;
	// .info_bg {
	// 	width: 630rpx;
	// 	height: 276rpx;
	// 	background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg8.png') no-repeat;
	// 	background-size: cover;
	// 	margin: 48rpx auto 0rpx;
	// }
	// .info_bg1 {
	// 	width: 630rpx;
	// 	height: 276rpx;
	// 	background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg9.png') no-repeat;
	// 	background-size: cover;
	// 	margin: 48rpx auto 0rpx;
	// }
}
.main {
	background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg7.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
.info_bg {
	position: relative;
	width: 630rpx;
	height: 276rpx;
	margin: 0 auto;

	.bg_img {
		height: 100%;
		width: 100%;
		& > image {
			height: 100%;
			width: 100%;
		}
	}
	.info_box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.left {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 35rpx;
			.name {
				font-size: 30rpx;
				font-weight: 500;
				color: #2a292a;
				margin-bottom: 30rpx;
			}
			.zk {
				width: 222rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: linear-gradient(-90deg, #f4deb3, #e8bb68);
				border-radius: 25rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #432005;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			align-items: center;
			.discount {
				font-size: 58rpx;
				font-weight: bold;
				color: #deb762;
				& > text {
					font-size: 28rpx;
				}
			}
			.origin {
				font-size: 28tpx;
				text-decoration: line-through;
				color: #929292;
			}
		}
	}
}
.share {
	background-color: rgb(241, 249, 255);
	padding: 16rpx 0;
	margin-top: 52rpx;
	color: #68aff0;
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	text-align: center;
}
.btns {
	display: flex;
	justify-content: space-between;
	margin-top: 108rpx;
	padding: 0 40rpx;
	color: #194FC9;
	view {
		width: 320rpx;
		height: 86rpx;
		text-align: center;
		line-height: 86rpx;
		border: 1px solid #194FC9;
		border-radius: 44rpx;
	}
	.right {
		background-color: #194FC9;
		color: white;
	}
}

.status {
	text-align: center;
	margin-top: 70rpx;
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #191919;
	.num {
		color: #ff8431;
		font-size: 32rpx;
		font-weight: bold;
	}
}

.time {
	margin-top: 53rpx;
	text-align: center;
	font-size: 30rpx;
	font-weight: 500;
	color: #2b2b2b;
	.hour,
	.second,
	.mint {
		background: #ff4358;
		border-radius: 10rpx;
		padding: 6rpx;
		width: 54px;
		height: 60rpx;
		line-height: 60rpx;
		color: white;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
	}
	.hour {
		margin-left: 36rpx;
	}
	.second {
		margin-right: 36rpx;
	}
	.mh {
		margin: 0 20rpx;
		color: #ff4358;
		font-weight: bold;
	}
}

.photo {
	margin-top: 76rpx;
	padding: 0 30rpx;
	.box {
		position: relative;
		flex: 1;
		height: 110rpx;
		display: flex;
		justify-content: space-around;
		.imgBox {
			position: relative;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			margin-right: 20rpx;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
			}

			.master {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translate(-50%, 50%);
				width: 61rpx;
				height: 24rpx;
				line-height: 24rpx;
				text-align: center;
				font-size: 22rpx;
				background: #ff8431;
				color: #fff;
				border-radius: 10rpx;
			}
		}

		.type {
			position: absolute;
			bottom: -20rpx;
			z-index: 999;
			background: #ff8431;
			border-radius: 10rpx;
			color: white;
			font-size: 22rpx;
			padding: 4rpx 20rpx;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
		}
	}
}
</style>
